<template>
    <el-container class="public-container">
        <el-header style="padding: 0;">
            <Header />
        </el-header>
        <el-main>
            <router-view v-slot="{ Component }">
                <Transition name="fade">
                    <keep-alive :max="10">
                        <component :is="Component"></component>
                    </keep-alive>
                </Transition>
            </router-view>
        </el-main>
        <el-footer style="padding: 0;">
            <Footer />
        </el-footer>
    </el-container>
</template>

<script setup>
import Header from '@/layouts/components/Header.vue'
import Footer from '@/layouts/components/Footer.vue'
</script>

<style scoped>
.public-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.el-main {
    flex: 1;
    padding: 0;
}

.fade-enter-from {
    opacity: 0;
}

.fade-enter-to {
    opacity: 1;
}

.fade-leave-from {
    opacity: 1;
}

.fade-leave-to {
    opacity: 0;
}

.fade-leave-active {
    transition: all 0.3s;
}

.fade-enter-active {
    transition: all 0.3s;
    transition-delay: 0.3s;
}
</style> 